<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<base href="/">
	<meta charset="utf-8">
	<link rel="stylesheet" href="register/register.css">
	<link rel="stylesheet" href="fonts/iconfont.css">
	<title>TCL 账号注册</title>
	<style>
		/* 错误提示样式 */
		.error {
			color: red;
			display: none;
		}
	</style>
</head>

<body>
<div class="w">
	<div class="logo-wrapper">
		<a href="home/home.html">
			<img src="images/LOGO_2.png" alt="">
		</a>
	</div>
	<div class="crumb">
		<span>TCL 账号登陆</span>
	</div>
</div>
<div class="menu-main-wrapper w">
	<div class="menu-main">
		<div class="menu-main-container">
			<form id="registerForm">
				<h5>注册 TCL 账号</h5>
				<input type="text" placeholder="设置用户名" name="username" required>
				<span class="error" id="usernameError"></span>
				<input type="password" name="password" placeholder="设置密码" required>
				<span class="error" id="passwordError"></span>
				<input type="password" name="confirmpassword" placeholder="确认密码" required>
				<span class="error" id="confirmPasswordError"></span>
				<input type="text" name="phone" placeholder="设置手机号" required>
				<span class="error" id="phoneError"></span>
				<p class="p1">密码由 6 - 16 位英文字母、数字或者符号组成</p>
				<button type="submit">注册</button>
			</form>
			<a href="page/login">已有账号直接登录</a>
		</div>
	</div>
</div>
<div class="foot w">
        <span>
            <a href="">经销商之家</a>
        </span>
	<span>
            ©2010 - 2023 TCL CORPORATION All Rights Reserved.<a href="">使用条款</a>TCL 集团股份有限公司版权所有
            粤 ICP 备 05040863 号
        </span>
</div>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		const registerForm = document.getElementById('registerForm');
		const usernameInput = registerForm.querySelector('input[name="username"]');
		const passwordInput = registerForm.querySelector('input[name="password"]');
		const confirmPasswordInput = registerForm.querySelector('input[name="confirmpassword"]');
		const phoneInput = registerForm.querySelector('input[name="phone"]');
		const usernameError = document.getElementById('usernameError');
		const passwordError = document.getElementById('passwordError');
		const confirmPasswordError = document.getElementById('confirmPasswordError');
		const phoneError = document.getElementById('phoneError');

		const reg = /^\w{6,16}$/;
		const phoneReg = /^1[3-9]\d{9}$/; // 简单的手机号正则验证

		registerForm.addEventListener('submit', async function (e) {
			e.preventDefault();

			// 清空之前的错误提示
			usernameError.style.display = 'none';
			passwordError.style.display = 'none';
			confirmPasswordError.style.display = 'none';
			phoneError.style.display = 'none';

			let isValid = true;

			// 验证用户名格式
			if (!reg.test(usernameInput.value)) {
				usernameError.textContent = '用户名必须是 6 - 16 位数字字母_';
				usernameError.style.display = 'block';
				isValid = false;
			}

			// 验证用户名是否重复
			if (isValid) {
				try {
					const response = await fetch(`user/getUserByUsername?username=${usernameInput.value}`);
					const result = await response.json();
					if (result.data) {
						usernameError.textContent = '账号已存在,请重新编辑';
						usernameError.style.display = 'block';
						isValid = false;
					}
				} catch (error) {
					usernameError.textContent = '网络错误，请稍后重试';
					usernameError.style.display = 'block';
					isValid = false;
				}
			}

			// 验证密码格式
			if (!reg.test(passwordInput.value)) {
				passwordError.textContent = '密码必须是 6 - 16 位数字字母_';
				passwordError.style.display = 'block';
				isValid = false;
			}

			// 验证确认密码
			if (passwordInput.value!== confirmPasswordInput.value) {
				confirmPasswordError.textContent = '密码和确认密码必须一样';
				confirmPasswordError.style.display = 'block';
				isValid = false;
			}

			// 验证手机号格式
			if (!phoneReg.test(phoneInput.value)) {
				phoneError.textContent = '请输入有效的手机号';
				phoneError.style.display = 'block';
				isValid = false;
			}

			if (isValid) {
				// 禁用提交按钮
				const submitButton = registerForm.querySelector('button[type="submit"]');
				submitButton.disabled = true;

				try {
					const formData = new FormData(registerForm);
					const response = await fetch('user/register', {
						method: 'POST',
						body: formData
					});
					const result = await response.json();
					const code = result.code;
					const msg = result.msg;

					if (code!== 200) {
						alert(msg);
					} else {
						alert(msg);
						setTimeout(function () {
							window.location.href = 'page/login';
						}, 3000);
					}
				} catch (error) {
					alert('网络错误，请稍后重试');
				} finally {
					// 恢复按钮可用
					submitButton.disabled = false;
				}
			}
		});
	});
</script>
</body>

</html>